<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*  问题1：重置默认的样式 reset.css 和 normalize.css*/
        /* 问题2：样式和网页布局现在在同一个文件 分离 后期实现复用 */

        /* 问题3：选择器，写起来非常的繁琐，需要做简化 需要使用 css 的预处理语言（less sass）新的编程语言 前端自动化构建工具 webpack   less文件-- webpack---css文件。 c语言---编译---计算器01*/


        /* 问题4：盒子外扩，需要程序猿手工的计算宽高，非常的麻烦*/
        /* 使用另外的一种盒子模型，一般叫做怪异盒子。*/


        /* 第一步： 文件的扩展名叫做 .css 代表是一个样式文件，我们可以将之前HTML style里面书写的样式 单独提取到 index.css 这个文件*/
        /* 引入一个外部的样式重置文件*/
        /*@import url(./reset.css);*/


        * {
            margin: 0;
            padding: 0;
        }
        h2{
            font-weight: normal;
        }



        ul, li {
            /*去除列表里面的小圆点*/
            list-style: none;

        }


        /* 书写自己的样式代码*/
        .container {
            /*width: ; 当前的盒子的宽度不用设置，因为当前的显示器的宽度 100%*/

            height: 755px;
            background-color: #eeeeee;
            border: 1px solid red;
        }

        .container .content {
            width: 1200px;
            height: 650px;
            /*border: 1px solid #000;*/
            /*水平方向上的居中*/

            /*margin-left:(大盒子的宽度-小盒子的宽度)/2*/
            margin: 0 auto;

        }

        .container .content .title {
            height: 204px;
            line-height: 204px;
            /*border: 1px solid #000;*/
            font-size: 36px;
            color: #222222;
            text-align: center;

        }
        .clearfix{

        }

        .clearfix:after{
            display: block;
            content: '';
            clear: both;
        }
        /* 千万小心 浮动带来问题，父容器高度塌陷*/
        .container .content .list li{
            /* 默认情况下盒子外扩 */

            /* 该为如下之后，盒子是怪异盒子，内减，则设计稿上面是多少，我们就写多少即可。*/
            box-sizing: border-box;
            /* 水平 垂直 羽化（模糊程度） 大小 */
            box-shadow: 1px 1px 2px 2px #666666;

            /* 设置盒子的圆角 属性值是圆角的半径*/
            border-radius: 10px;

            padding-top: 50px;
            padding-left: 50px;
            padding-right: 50px;

            background-color: #ffffff;

            width: 280px;
            height: 446px;
            margin-right: 26px;

            /*(280 + 26 ) * 4 = 1,224 > 1200 居中的盒子是 1200 是无法放得下里面4个浮动的子盒子，所以第四个子盒子，掉下来，从新的一行进行排列*/

            /* 396px*/
            text-align: center;
            float: left;
        }

        .container .content .list li h3{
            padding-top: 50px;
            padding-bottom: 30px;
            font-size: 22px;
            color: #222222;
            text-shadow: 1px 1px 3px #cccccc;

        }


        .container .content .list li p{
            font-size: 16px;
            color: #666666;
            line-height: 32px;
        }


        .container .content .list li.last{
            margin-right: 0;

        }



    </style>

    <!-- 让 html 网页和 样式 index.css 产生关联，现在HTML页面要使用 index.css 文件，将 index.css 引入-->
    <!--rel relatioship 关联 stylesheet样式表-->
    <!--href 样式表的路径 1. 相对地址 2. 绝对地址-->
    <!--<link rel="stylesheet" href="./css/reset.css">-->

    <!--3. 重置文件要在我们写的其他的样式前面-->




</head>
<body>

<h1>案例1-浮动布局</h1>
<hr>

<div class="container">
    <!--版心-->
    <div class="content">
        <div class="title">
            <h2>助力企业降本增效，彰显核心价值</h2>
        </div>
        <ul class="list clearfix">
            <li>
                <img src="./imgs/new1.png" alt="">

                <h3>高效率过滤</h3>
                <p>高效客户资料整理，提高意向客户转化率，轻松完成量化指标。</p>
            </li>
            <li>
                <img src="./imgs/new2.png" alt="">

                <h3>高效率过滤</h3>
                <p>高效客户资料整理，提高意向客户转化率，轻松完成量化指标。</p>
            </li>

            <li>
                <img src="./imgs/new3.png" alt="">

                <h3>高效率过滤</h3>
                <p>高效客户资料整理，提高意向客户转化率，轻松完成量化指标。</p>
            </li>

            <li class="last">
                <img src="./imgs/new4.png" alt="">

                <h3>高效率过滤</h3>
                <p>高效客户资料整理，提高意向客户转化率，轻松完成量化指标。</p>
            </li>


        </ul>
    </div>
</div>

</body>
</html>